<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑资料</title>
    <script>
        window.onload = function () {
            //登录后显示当前用户
            if (localStorage.getItem('loginName')) {
                var links = document.querySelectorAll('#headright a')
                for (var i = 0; i < links.length; i++) {
                    links[i].style.display = 'none';
                }
                document.querySelector("#loginName").style.display = 'inline-block';
                document.querySelector("#unregister").style.display = 'inline-block';
                document.querySelector('#headright span').style.display = "none";
                document.querySelector('#loginName').innerHTML = "当前账号：" + '<a href="personal.html">' + localStorage.getItem('loginName') + '</a>'
            }
            document.querySelector('#photo').onclick = function () {
                document.querySelector('#headimg').click()
            }
        }
        //注销事件
        function unregister() {
            localStorage.removeItem('loginName');
            location.replace('shouye.html')
        }
        //导航栏固定
        window.onscroll = function () {
            if (document.documentElement.scrollTop >= 80) {
                document.getElementById('bodynav').style.position = 'fixed';
                document.getElementById('bodynav').style.top = 0;
                document.getElementById('bodynav').style.left = 0;
            }
            else {
                document.getElementById('bodynav').style.position = 'static';
            }
        }

        function myUploadFile() {
            var fileHead = document.querySelector('#headimg').files[0]
            var fread = new FileReader()
            fread.onload = function (e) {
                document.querySelector('#photo>img').src = e.target.result
            }
            fread.readAsDataURL(fileHead)
        }

    
        function login() {
            var userPassword = document.querySelector("#txtPassword").value;
            var usereset = document.querySelector("#reset").value;
            var userqueren = document.querySelector("#txtqueren").value;
            var users = JSON.parse(localStorage.getItem("users"));
            for (var i = 0; i < users.length; i++) {
                if(usereset== userqueren){
                    alert("密码修改成功！");
                }else{
                    alert("输入的密码不一致！");
                }
                localStorage.getItem('loginName');
                console.log(loginName)
                alert("修改成功！");
                location.href = "shouye.html"
                return
            }
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul li {
            list-style: none;
        }

        #shouye {
            width: 100%;
            min-width: 1200px;

        }

        #head {
            width: 80%;
            height: 80px;
            background-color: white;
            margin: 0 auto;
            /* background-color: yellow; */
        }

        #logo {
            /* background-color: red; */
            width: 30%;
            height: 80px;
            float: left;
            position: relative;
            left: 10px;
        }

        #headleft {
            width: 50%;
            float: left;
            height: 80px;
            /* background-color: yellow; */
        }

        #headleft1 {
            height: 80px;
            line-height: 80px;
        }

        #textword {
            width: 250px;
            height: 30px;
        }

        #textsearch {
            width: 50px;
            height: 35px;
            border: 1px solid #ccc;
            background: url(images/serach.jpg);
        }

        /*背景图  */
        #login {
            text-decoration: none;
            color: #407434;
        }

        #login img {
            width: 20px;
            height: 80px;
        }

        #headright {
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

        /* 注销按钮 */
        #loginName,
        #unregister {
            display: none;
        }

        #unregister {
            height: 25px;
            width: 50px;
            border: none;
            outline: none;
            border-radius: 5px;
            background: linear-gradient(rgb(160, 191, 124), rgb(101, 147, 74));
            box-shadow: 0 0 3px rgb(64, 116, 52);
            cursor: pointer;
            color: white;
        }

        #bodynav {
            width: 100%;
            height: 60px;
            background-color: rgb(160, 190, 117);
            /* background-color: red; */
        }

        #nav {
            width: 80%;
            height: 60px;
            margin: 0 auto;
            background-color: rgb(160, 190, 117);
            /* background-color:pink; */
        }

        #nav li {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            width: 20%;
            float: left;
        }

        #nav a {
            color: grey;
            font-weight: bold;
        }

        #nav a:hover {
            color: #407434;
            font-weight: bold;
        }

        #choose {
            width: 500px;
            display: none;
        }

        #pep {
            list-style: none;
            margin-left: 80px;
        }

        #pep dd {
            width: 100px;
            height: 50px;
            line-height: 50px;
            background-color: rgba(230, 230, 230, 0.6);
            font-size: 14px;
            position: relative;
        }

        #pep dd a {
            color: grey;
        }

        #updown {
            width: 500px;
            display: none;
        }

        #up {
            list-style: none;
            margin-left: 80px;
        }

        #up dd {
            width: 100px;
            height: 50px;
            line-height: 50px;
            background-color: rgba(230, 230, 230, 0.6);
            font-size: 14px;
            position: relative;
        }

        #up dd a {
            color: grey;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $('#secondnav').mouseover(function () {
                $('#choose').css('display', 'block')
            })
            $('#secondnav').mouseout(function () {
                $('#choose').css('display', 'none')
            })
        })
        $(function () {
            $('#down').mouseover(function () {
                $('#updown').css('display', 'block')
            })
            $('#down').mouseout(function () {
                $('#updown').css('display', 'none')
            })
        })
    </script>
    <link href="css/personal.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div id="shouye">
        <div id="head">
            <div id="logo">
                <img src="images/logo1.jpg" alt="" width="200px" height="80px">
            </div>
            <div id="headleft">
                <div id="headleft1">
                    <form action="#">
                        <input id="textword" type="text"><input id="textsearch" type="submit" value=" ">
                    </form>
                </div>
            </div>
            <div id="headright">
                <a href="login.html" id="login">登录</a>
                <span>|</span>
                <a href="register.html" id="login">注册</a>
                <span id="loginName"></span>
                <button id="unregister" onclick="unregister()">注销</button>
            </div>
        </div>
        <div id="bodynav">
            <div id="nav">
                <ul>
                    <li><a href="shouye.html">首页</a></li>
                    <li id="secondnav"><a href="#">套餐</a>
                        <div id="choose">
                            <dl id="pep">
                                <dd>人数</dd>
                                <dd><a href="meetmenu2-3.html">2-3人</a></dd>
                                <dd><a href="#">4-6人</a></dd>
                                <dd><a href="#">7-8人</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li id="down"><a href="#">健康饮食 </a>
                        <div id="updown">
                            <dl id="up">
                                <dd><a href="">人体群众</a></dd>
                                <dd><a href="laoren.html">老人</a></dd>
                                <dd><a href="">孕妇</a></dd>
                                <dd><a href="">青少年</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="fenxiangjiemian.html">分享圈</a></li>
                    <li><a href="contactus.html">联系我们</a></li>
                </ul>
            </div>
        </div>
        <div id="main">
            <div id="list">
                <ul>
                    <li></li>
                    <li><a href="personal.html">我的菜单</a></li>
                    <li><a href="fabufenxiang.html">上传</a></li>
                    <li><a href="shoucang.html">我的收藏</a></li>
                    <li><a href="#">编辑资料</a></li>
                </ul>
            </div>
            <div id="essay">
                <div id="photo">
                    <img src="images/haimianbaobao.jpg" alt="">
                    <input type="file" id="headimg" accept="images/jpeg" multiple onchange="myUploadFile()">
                </div>
                <div id="user">
                    <form action="#">
                        <!-- <label for="">用户名：</label>
                        <input type="text" id="txtName" placeholder="请输入用户名" required><br> -->
                        <label for=""> 原密码：</label>
                        <input type="text" id="txtPassword" placeholder="请输入原密码" required><br>
                        <label for=""> 新密码：</label>
                        <input type="text" id="reset" placeholder="请输入新密码" required><br>
                        <label for=""> 重复密码：</label>
                        <input type="text" id="txtqueren" placeholder="请确认密码" required><br>
                        <input type="button" id="btnLogin" value="确认" onclick="login()">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Code injected by live-server -->
    <script type="text/javascript">
        // <![CDATA[  <-- For SVG support
        if ('WebSocket' in window) {
            (function () {
                function refreshCSS() {
                    var sheets = [].slice.call(document.getElementsByTagName("link"));
                    var head = document.getElementsByTagName("head")[0];
                    for (var i = 0; i < sheets.length; ++i) {
                        var elem = sheets[i];
                        var parent = elem.parentElement || head;
                        parent.removeChild(elem);
                        var rel = elem.rel;
                        if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                            var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                            elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                        }
                        parent.appendChild(elem);
                    }
                }
                var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
                var address = protocol + window.location.host + window.location.pathname + '/ws';
                var socket = new WebSocket(address);
                socket.onmessage = function (msg) {
                    if (msg.data == 'reload') window.location.reload();
                    else if (msg.data == 'refreshcss') refreshCSS();
                };
                if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
                    console.log('Live reload enabled.');
                    sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
                }
            })();
        }
        else {
            console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
        }
	// ]]>
    </script>
</body>

</html>